/**
 * Modal boxes ala MacOSX.
 */

var moOSXBox = {};

moOSXBox.Base = new Class(
{
	setOptions: function(options)
	{
		this.options = Object.extend(this.options, options || {});
	},
	
	initialize: function(title, options)
	{
		// options
		this.options = { 
			'className': 'moosxbox',
			'id': null,
			'overlay': true,
			'btValidate': true,
			'btCancel': false,
			'onCancel': Class.empty,
			'onClose': Class.empty,
			'onValidate': Class.empty
		};
		this.setOptions(options);
		
		// titlebar
		this.modalTitle = new Element('dl', {'class': 'titlebar'},
			new Element('dd', {'class': 'titletext'}, title),
			new Element('dd', {'class': 'close'},
				new Element('a', {'href': '#'}, 'close').addEvent('click', this.onClose.bindAsEventListener(this))
			)
		);
		
		// content
		this.modalContent = new Element('div', {'class': 'content'});
		
		// footer & buttons
		this.modalFooter  = new Element('p', {'class': 'buttons'});
		if (this.options.btCancel)
		{
			this.modalFooter.appendChild(
				new Element('button', 'Cancel').addEvent('click', this.onCancel.bindAsEventListener(this))
			);
		}
		if (this.options.btValidate)
		{
			this.modalFooter.appendChild(
				new Element('button', 'Ok').addEvent('click', this.onValidate.bindAsEventListener(this))
			);
		}
		
		// the box
		this.modalBox = new Element('div', {'class': this.options.className},
			this.modalTitle,
			this.modalContent,
			this.modalFooter
		);
		
		if (this.options.id)
			this.modalBox.id = this.options.id;
		
		// background overlay
		this.modalOverlay = new Element('div', {'id': 'moosxoverlay'});
	},
	
	show: function()
	{
		document.body.appendChild(this.modalOverlay);
		document.body.appendChild(this.modalBox);
		
		this.modalBox.fx = new Fx.Slide(this.modalBox).hide();
		this.modalBox.getParent().setStyles({
			'z-index':  this.modalBox.getStyle('z-index'),
			'position': this.modalBox.getStyle('position')
		});
		
		this.modalOverlay.show();
		this.modalBox.fx.slideIn();
		
		return this;
	},
	
	hide: function()
	{
		this.modalBox.fx.slideOut();
		this.modalOverlay.hide();
		return this;
	},
	
	loadContent: function(url, method)
	{
		this.modalContent.appendChild(new Element('p', {'class': 'loading'}, 'loading...'));
		new Ajax(url, {'update' : this.modalContent, 'method': method || 'get'}).request();
		return this;
	},
	
	setContent: function(content)
	{
		switch($type(content))
		{
			case 'string':
				this.modalContent.innerHTML = content;
				break;
			
			case 'element':
				this.modalContent.innerHTML = '';
				this.modalContent.appendChild(content);
		}
		return this;
	},
	
	destroy: function()
	{
//		this.modalBox.fx.setOptions({'onComplete': this.modalBox.remove.bind(this.modalBox)});
		this.modalBox.fx.slideOut();
		this.modalOverlay.remove();
		
		this.modalBox = null;
		this.modalOverlay = null;
	},
	
	// callbacks
	
	onCancel: function()
	{
		this.options.onCancel();
		this.destroy();
	},
	
	onClose: function(evt)
	{
		this.options.onClose();
		this.destroy();
	},
	
	onValidate: function()
	{
		this.options.onValidate();
	}
});
